<style lang="less">
</style>

<template>
    <div style="padding-left:80px">
        <el-form
            :model="queryForm"
            label-width="130px"
            :rules="rules"
            ref="addform"
            label-suffix="："
        >
            <el-row :getter="24">
                <el-col :span="11">
                    <el-form-item :label="$t('考卷名称')" prop="examName">
                        <el-input
                            v-model="queryForm.examName"
                            maxlength="32"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('考试时间')" prop="datetimerange">
                        <div>
                            <el-date-picker
                                type="datetimerange"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                unlink-panels="true"
                                range-separator="至"
                                v-model="queryForm.datetimerange"
                                start-placeholde="starTime"
                                :start-placeholder="$t('label.beginTime')"
                                :end-placeholder="$t('label.endTime')"
                                style="width:auto;"
                            ></el-date-picker>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="11">
                    <el-form-item :label="$t('题库分类')" prop="categoryName">
                        <el-select
                            @change="changeQuestion"
                            v-model="queryForm.categoryName"
                            :placeholder="$t('common.pla.pleaseSelect')"
                            clearable
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.questionPool"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item :label="$t('绑定课号')" prop="courseCode">
                        <select-For-Page
                            ref="fff"
                            :val="queryForm.courseCode"
                            @returnVal="getProjectHeadId"
                        ></select-For-Page>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="23">
                    <el-form-item :label="$t('考试设置')" prop="examSettingList">
                        <el-table
                            stripe
                            :data="dataLists"
                            size="mini"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column
                                :label="$t('题库名')"
                                prop="questionPoolName"
                            ></el-table-column>
                            <el-table-column :label="$t('试题抽取数量')">
                                <template slot-scope="scope">
                                    <el-input-number
                                        onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                                        v-model.number="scope.row.questionNum"
                                        :min="0"
                                        :max="scope.row.totalNum"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{ $t('overseasInstitutions.cancel') }}</el-button>
            <el-button type="primary" @click="conserve">
                {{ $t('确定') }}
            </el-button>
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import examinationManagement from 'common/src/api/academicBehaviorNorms/examination/examinationManagement'
import selectForPage from 'common/src/views/academicBehaviorNorms/examination/common/selectForPage'

export default {
    components: {
        'select-For-Page': selectForPage
    },
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        showFlag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            multipleSelection: [],
            dataLists: [],
            queryForm: {
                calendarId: null,
                examName: '',
                datetimerange: [],
                startTime: '',
                endTime: '',
                courseCode: '',
                examSettingList: [
                    {
                        questionPoolId: null,
                        questionNum: null
                    }
                ]
            },
            innerVisible: false,
            id: '',
            approver: [],
            byCode: [],
            options: {
                title: [],
                nationId: [],
                approver: [],
                questionPool: [],
                byCode: []
            },
            rules: {
                examName: [
                    {
                        required: true,
                        message: this.$t('请输入考卷名称'),
                        trigger: 'change'
                    }
                ],
                cnName: [
                    {
                        required: true,
                        message: this.$t('请选择考卷语言'),
                        trigger: 'change'
                    }
                ],
                categoryName: [
                    {
                        required: true,
                        message: this.$t('请选择题库分类'),
                        trigger: 'change'
                    }
                ],
                courseCode: [
                    {
                        required: true,
                        message: this.$t('请选择绑定课号'),
                        trigger: 'change'
                    }
                ],
                examSettingList: [
                    {
                        required: true,
                        message: this.$t('请选择考试设置'),
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    watch: {
        dataListProp: {
            handler: function(newV, oldV) {
                this.queryForm.examName = ''
                this.queryForm.startTime = ''
                this.queryForm.endTime = ''
                // this.queryForm.courseCode = ''
                this.dataLists = []
                examinationManagement.listCategory().then(res => {
                    this.options.questionPool = res.data
                })

                this.$nextTick(() => {
                    this.dataLists.forEach(ele => {
                        this.queryForm.chooseSettingList.forEach((el, index) => {
                            if (ele.questionPoolId === el.questionPoolId) {
                                this.$refs.addform.toggleRowSelection(this.dataLists[index])
                            }
                        })
                    })
                })
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        // this.changeQuestion()
    },
    mounted() {},
    methods: {
        getProjectHeadId(val) {
            this.queryForm.courseCode = val
        },

        // 根据题库分类获取对应题库
        changeQuestion(id) {
            let params = {
                id: id
            }
            if (id) {
                examinationManagement.getPoolByCategoryId(params).then(res => {
                    if (res && res.code == 200) {
                        this.dataLists = res.data
                    }
                })
            }
        },

        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.$refs['addform'].resetFields()
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['addform'].resetFields()
            this.$emit('cancel-dialog', false)
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 保存
        conserve() {
            this.$refs['addform'].validate(valid => {
                if (valid) {
                    if (
                        this.multipleSelection.length === 0 ||
                        this.multipleSelection.some(
                            item => item.questionNum === 0 || !item.questionNum
                        )
                    ) {
                        this.$message({
                            type: 'error',
                            message: this.$t('未勾选考试设置或者试题抽取数量全部为0')
                        })
                    } else {
                        this.dataProp = this.$emit(
                            'affirm-form',
                            this.queryForm,
                            this.dataQueryForm,
                            this.multipleSelection
                        )
                        this.$refs.fff.fff()
                    }
                }
            })
        }
    }
}
</script>
